<template>
  <div>
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="(item,index) in bannerList" :key="index">
<!--        <div>{{fileRoot + item.pic}}</div>-->
        <img :src="fileRoot + item.pic" style="height: 500px;width: 100%" alt="">
<!--          <div-->
<!--              @click="goweb(item.url)"-->
<!--              :style="{-->
<!--            background:-->
<!--              'url('+ fileRoot + item.pic +') center center no-repeat',-->
<!--            height: '500px',-->
<!--            cursor: 'pointer',-->
<!--            width: '100%',-->
<!--          }"-->
<!--          ></div>-->
      </el-carousel-item>
    </el-carousel>
    <div class="index-btn-box ant-bg-color-ffffff">
      <IndexBtnBox @antClick="rightClick"></IndexBtnBox>
    </div>
    <div class="w-1200 ant-flex">
      <div class="index-body-left">
        <div class="ant-flex">
          <div class="index-cb ant-bg-color-ffffff">
            <el-tabs v-model="activeName"   v-if="list.length != 0">
              <el-tab-pane name="first" >
                <span slot="label" @mouseover="mouseover('first')" @click="goList(106)">晨报</span>
                <template v-if="list.cb.length==0" >
                  暂无数据
                </template>
                <template v-else>
                  <div class="ant-flex ant-flex-between" style="cursor: pointer" v-for="(item,index) in list.cb"  :key="String(index)" @click='goTo("ReadReadPdf",item.id)'>
                    <template v-if="index==0 && isTimeDifference(item.update_time)">
                      <div style="font-size: 16px;color: #3d82ff;font-weight: bold;text-align: left;line-height: 30px">
                        <span style="background: #ff0000;color: #ffffff;margin-right: 10px;padding: 0 10px">最新</span>{{ item.title }}
                      </div>
                    </template>
                    <template v-else>
                      <div class="index-cb_title" >
                        · {{ item.title }}
                      </div>
                      <div class="index-cb_time">{{ item.update_time.substring(0,10)}}</div>
                    </template>
                  </div>
                </template>
              </el-tab-pane>
              <el-tab-pane name="second">
                <span slot="label" @mouseover="mouseover('second')" @click="goList(107)">研报</span>
                <template v-if="list.yb.length==0" >
                  暂无数据
                </template>
                <template v-else>
                  <div class="ant-flex ant-flex-between" style="cursor: pointer" v-for="(item,index) in list.yb"  :key="String(index)" @click='goTo("ReadReadPdf",item.id)'>
                    <template v-if="index==0 && isTimeDifference(item.update_time)">
                      <div style="font-size: 16px;color: #3d82ff;font-weight: bold;text-align: left;line-height: 30px">
                        <span style="background: #ff0000;color: #ffffff;margin-right: 10px;padding: 0 10px">最新</span>{{ item.title }}
                      </div>
                    </template>
                    <template v-else>
                      <div class="index-cb_title" >
                        · {{ item.title }}
                      </div>
                      <div class="index-cb_time">{{ item.update_time.substring(0,10)}}</div>
                    </template>
                  </div>
                </template>
              </el-tab-pane>
<!--              <el-tab-pane name="third">-->
<!--                <span slot="label" @mouseover="mouseover('third')" @click="goList(111)">期权</span>-->
<!--                <template v-if="list.qq.length==0" >-->
<!--                  暂无数据-->
<!--                </template>-->
<!--                <template v-else>-->
<!--                  <div class="ant-flex ant-flex-between" style="cursor: pointer" v-for="(item,index) in list.qq"  :key="String(index)" @click='goTo("ReadReadPdf", item.id)'>-->
<!--                    <template v-if="index==0 && isTimeDifference(item.update_time)">-->
<!--                      <div style="font-size: 16px;color: #3d82ff;font-weight: bold;text-align: left;line-height: 30px">-->
<!--                        <span style="background: #ff0000;color: #ffffff;margin-right: 10px;padding: 0 10px">最新</span>{{ item.title }}-->
<!--                      </div>-->
<!--                    </template>-->
<!--                    <template v-else>-->
<!--                      <div class="index-cb_title" >-->
<!--                        · {{ item.title }}-->
<!--                      </div>-->
<!--                      <div class="index-cb_time">{{ item.update_time.substring(0,10)}}</div>-->
<!--                    </template>-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-tab-pane>-->
              <el-tab-pane name="fourth">
                <span slot="label" @mouseover="mouseover('fourth')" @click="goList(128)">专题报告</span>
                <template v-if="list.lh.length==0" >
                  暂无数据
                </template>
                <template v-else>
                  <div class="ant-flex ant-flex-between" style="cursor: pointer" v-for="(item,index) in list.lh"  :key="String(index)" @click='goTo("ReadReadPdf",item.id)'>
                    <template v-if="index==0 && isTimeDifference(item.update_time)">
                      <div style="font-size: 16px;color: #3d82ff;font-weight: bold;text-align: left;line-height: 30px">
                        <span style="background: #ff0000;color: #ffffff;margin-right: 10px;padding: 0 10px">最新</span>{{ item.title }}
                      </div>
                    </template>
                    <template v-else>
                      <div class="index-cb_title" >
                        · {{ item.title }}
                      </div>
                      <div class="index-cb_time">{{ item.update_time.substring(0,10)}}</div>
                    </template>
                  </div>
                </template>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="index-gsgg ant-bg-color-ffffff" v-if="list.length != 0">
            <el-tabs v-model="rightName" @tab-click="handleClick"  v-if="list.length != 0">
              <!--              <el-tab-pane label="公司公告" name="gsgg" >-->
              <el-tab-pane name="gsgg" >
                <span slot="label" @mouseover="rightmouseover('gsgg')" @click="goList(108)">公司公告</span>
                <template v-if="list.gsgg.length==0" >
                  暂无数据
                </template>
                <template v-else>
                  <div class="ant-flex ant-flex-between" style="cursor: pointer" v-for="(item,index) in list.gsgg"  :key="String(index)" @click='goTo("ReadReadPdf",item.id)'>
                    <template v-if="index==0 && isTimeDifference(item.update_time)">
                      <div style="font-size: 16px;color: #3d82ff;font-weight: bold;text-align: left;line-height: 30px">
                        <span style="border:1px solid #ff0000;color: #ff0000;margin-right: 10px;padding: 0 10px;font-weight: initial">NEW</span>{{ item.title }}
                      </div>
                    </template>
                    <template v-else>
                      <div class="index-cb_title" >
                        · {{ item.title }}
                      </div>
                      <div class="index-cb_time">{{ item.update_time.substring(0,10)}}</div>
                    </template>
                  </div>
                </template>
              </el-tab-pane>
<!--              <el-tab-pane name="jgxq">-->
<!--                <span slot="label" @mouseover="rightmouseover('jgxq')">交割行权</span>-->
<!--                <template v-if="list.jgxq.length==0" >-->
<!--                  暂无数据-->
<!--                </template>-->
<!--                <template v-else>-->
<!--                  <div class="ant-flex ant-flex-between" style="cursor: pointer" v-for="(item,index) in list.jgxq"  :key="String(index)" @click='goTo("ReadReadPdf",item.id)'>-->
<!--                    <div class="index-cb_title" >-->
<!--                      · {{ item.title }}-->
<!--                    </div>-->
<!--                    <div class="index-cb_time">{{ item.update_time.substring(0,10)}}</div>-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-tab-pane>-->
            </el-tabs>
            <!--            <div class="index-gsgg_title">公司公告</div>-->
            <!--            <template v-if="list.gsgg.length==0" >-->
            <!--              <div class="ant-flex ant-flex-between">-->
            <!--                暂无数据-->
            <!--              </div>-->
            <!--            </template>-->
            <!--            <template v-else>-->
            <!--              <div class="ant-flex ant-flex-between" style="cursor: pointer"  v-for="(item,index) in list.gsgg"  :key="String(index)" @click='goTo("ReadReadPdf",item.id)'>-->
            <!--                <img-->
            <!--                    v-if="index < 3"-->
            <!--                    class="index-gsgg_img"-->
            <!--                    src="../../assets/images/hot.png"-->
            <!--                    alt=""-->
            <!--                />-->
            <!--                <div class="index-gsgg_info">-->
            <!--                  {{ item.title }}-->
            <!--                </div>-->
            <!--              </div>-->
            <!--            </template>-->
          </div>
        </div>
<!--        <div class="index-jjlc">-->
<!--          <div class="index-jjlc-left">-->
<!--            <div class="index-jjlc-left-title">热门活动</div>-->
<!--            <div class="ant-flex ant-flex-between">-->

<!--              <div class="ant-flex index-huodong" v-for="(item,index) in list.rmhd"  :key="String(index)">-->
<!--                <div style="margin-right: 10px;">-->
<!--                  <div class="index-huodong-title">-->
<!--                    {{ item.title }}-->
<!--                  </div>-->
<!--                  <div class="index-huodong-info">-->
<!--                    {{ item.introduction | ellipsis(50) }}-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div>-->
<!--                  <div class="index-huodong-btn" @click='goTo("ReadReadPdf",item.id)' style="cursor: pointer">报名</div>-->
<!--&lt;!&ndash;                  <div class="index-huodong-btn" style="margin-top: 10px;">&ndash;&gt;-->
<!--&lt;!&ndash;                    赛事规则&ndash;&gt;-->
<!--&lt;!&ndash;                  </div>&ndash;&gt;-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="ant-flex ant-flex-between">
          <div class="zj-box" style="position: relative">
            <div class="zj-box-ding" style="background: rgba(0, 0, 0, 0.8);color: #ffffff;line-height: 50px;height: 260px;position: absolute;left: 0;right: 0">
              <div @click="goweb('http://www.dce.com.cn/dalianshangpin/xqsj/tjsj26/rtj/rcjccpm/index.html')">大连商品交易所</div>
              <div @click="goweb('http://www.czce.com.cn/cn/jysj/ccpm/H770304index_1.htm')">郑州商品交易所</div>
              <div @click="goweb('http://www.cffex.com.cn/ccpm/')">中国金融期货交易所</div>
              <div @click="goweb('http://www.shfe.com.cn/statements/dataview.html?paramid=pm')">上海期货交易所</div>
              <div @click="goweb('http://www.ine.cn/statements/daily/?name=pm')">上海国际能源交易中心</div>
            </div>
            <img style="width: 100%" src="../../../src/assets/images/ccfx.png" />
            <div class="zj-box-title">持仓分析</div>
            <div class="zj-box-info">最新机构持仓变动分析和成交持仓查询</div>
          </div>
          <div class="zj-box" style="position: relative">
            <div class="zj-box-ding" style="background: rgba(0, 0, 0, 0.8);color: #ffffff;line-height: 60px;height: 260px;position: absolute;left: 0;right: 0">
              <div @click="goweb('http://www.ccidx.com/content/details_67_3204.html')">国债10年期</div>
              <div @click="goweb('http://www.ccidx.com/content/details_67_547.html')">国债2年期</div>
              <div @click="goweb('http://www.ccidx.com/content/details_67_611.html')">中证商品价格</div>
              <div @click="goweb('http://www.ccidx.com/content/details_67_612.html')">中证商品</div>
            </div>
            <img style="width: 100%" src="../../../src/assets/images/spzs.png" />
            <div class="zj-box-title">商品指数</div>
            <div class="zj-box-info">综合反映国内上市商品品种的波动情况</div>
          </div>
          <div class="zj-box" style="position: relative">
            <div class="zj-box-ding" style="background: rgba(0, 0, 0, 0.8);color: #ffffff;line-height: 60px;height: 260px;position: absolute;left: 0;right: 0">
              <div @click="goweb('http://www.shibor.org/')">SHIBOR和LPR</div>
              <div @click="goweb('http://www.chinamoney.com.cn/chinese/mkdatapm/\n')">质押式利率</div>
              <div @click="goweb('http://www.pbc.gov.cn/zhengcehuobisi/125207/125213/125431/125475/index.html')">每日央行公开市场操作业务</div>
              <div @click="goweb('http://www.pbc.gov.cn/zhengcehuobisi/125207/125213/index.html')">货币政策工具</div>
            </div>
            <img style="width: 100%" src="../../../src/assets/images/jjsj.png" />
            <div class="zj-box-title">经济数据</div>
            <div class="zj-box-info">最新全球宏观经济管理和产业经济数据</div>
          </div>
        </div>

        <!--        <div class="index-jjlc">-->
        <!--          <div class="index-jjlc-left">-->
        <!--            <div class="index-jjlc-left-title">基金理财</div>-->
        <!--            <div>-->
        <!--              <el-table :data="tableData" stripe style="width: 100%;">-->
        <!--                <el-table-column prop="jjdm" label="基金代码" width="80px">-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="jjmc" label="基金名称">-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="dwjz" label="单位净值" width="90px">-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="rzdz" label="日涨跌幅" width="90px">-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="jyz" label="近一周" width="90px">-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="jyy" label="近一月" width="90px">-->
        <!--                </el-table-column>-->
        <!--              </el-table>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
      <div class="index-body-right">
        <div class="index-body-right-box ant-bg-color-ffffff">
          <div class="ant-flex ant-flex-between">
            <div class="index-gsgg_title">快速通道</div>
            <div class="ant-flex index-body-right-login">
              <!--              <img src="../../assets/images/userico.png" alt="" />-->
              <!--              <div class="index-body-right-login-btn">登录</div>-->
            </div>
          </div>
          <div class="ant-flex index-body-right-call">
            <img src="../../assets/images/call.png" alt="" />
            <div class="index-body-right-call-text">全国客服：400-822-1758</div>
          </div>
          <div>
            <IndexBtnPro @antClick="rightClick"></IndexBtnPro>
          </div>
        </div>
        <div style="margin-top: 10px;">
          <el-calendar v-model="value">
            <template slot="dateCell" slot-scope="{ date, data }">
              <span
                  :class="isInArray(data.day) ? 'is-selected' : 'rili-s'"
                  @click="allcalendar(data.day)"
              >
                <!-- {{ data.day.split('-').slice(1).join('-') }} -->
                {{ data.day.split("-").slice(2).join("-") }}
              </span>
            </template>
          </el-calendar>
          <div class="index-rili-top" v-if="rili.isShow == true">
            <div class="index-rili-top-title">
              <i
                  class="el-icon-close index-rili-top-gb"
                  @click="rili.isShow = false"
              ></i>
              {{ rili.date }} 事件
            </div>
            <div class="index-rili-title">
              <i class="el-icon-date" style="margin-right: 8px;"></i>交易日历
            </div>
            <template v-if="rili.datalist.length!=0">
              <div class="index-rili-list"  v-for="(i,index) in rili.datalist" :key="String(index)" @click='goTo("ReadReadPdf",i.id)'>
                <i class="el-icon-caret-right" style="margin-right: 8px;"></i
                >{{ i.title }}
              </div>
            </template>
            <div class="index-rili-list" v-else>
              暂无数据
            </div>
          </div>
        </div>
        <div class="index-body-right-img">
          <!--          <img src="../../assets/images/ls/sjzx.png" alt="" />-->
          <img src="../../assets/images/ls/tjyd.png" alt="" @click="goList(134)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import index from './myindex'
export default index;
</script>

<style scoped lang="scss">
@import "~@/assets/scss/style.scss";
</style>

<style>
.el-carousel__container{
  height: 450px !important;
}
</style>
